<template>
  <div style="background: #202B61;width: 96%;height: 82%;text-align: left;position: absolute;margin: 18px;overflow-y: auto;">
    <div style="margin-left: 1vh;margin-right: 1vh;top: 1%; width: 99%;background: rgb(46, 60, 133);height: 8vh;float: left;position: absolute;">
      <div id="div0" @click="buttonClick('pageFour','div0')" style="background:#409EFF" class="buttonStyle">源荷预测</div>
      <div id="div1" @click="buttonClick('dispatch', 'div1')"  class="buttonStyle">负荷</div>
      <div id="div2" @click="buttonClick('equip', 'div2')" class="buttonStyle">设备信息</div>
      <div id="div3" @click="buttonClick('param', 'div3')" class="buttonStyle">参数设定</div>
      <div id="div4" @click="buttonClick('beforeResult', 'div4')" class="buttonStyle">日前优化结果</div>
      <div id="div5" @click="buttonClick('afterResult', 'div5')" class="buttonStyle">日中优化结果</div>
      <div id="div6" @click="buttonClick('pageThree','div6')" class="buttonStyle">稳定性控制</div>


      <div style="display: inline-block;float: right;">
        <!--<el-button type="primary" @click="save()">保存</el-button>-->
        <!--<el-button type="primary" @click="youhua()" style=" margin-top: 10px;margin-right: 20px">优化</el-button>-->
      </div>
    </div>
    <div style="margin-left: 1vh;margin-right: 1vh;top: 13%; width: 99%;height: auto;float: left;position: absolute;">
      <!--路由页面-->
      <router-view :key="activeDate"></router-view>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'dispatch',
    data(){
      return{
        project_id: this.$root.project_id,
        activeDate: '',
        projectId: ''
      }
    },
    mounted: function() {
      this.activeDate = new Date().getTime();
      this.$router.push({path: '/pageFour'})
  },
    methods:{
      buttonClick : function(type,divId){
        for(var i = 0;i<=6;i++){
          $("#div"+i).css("background","#202B61");
        }
        $("#"+divId).css("background","#409EFF");
        this.activeDate = new Date().getTime();
        //路由跳转
        this.$router.push('/'+type)
      },
    }
  }
</script>
<style scoped>
  .buttonStyle {
    height: 5vh;
    width: 15vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor:pointer;
    border-radius: 10px;
    font-family: Arial;
    border:none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #202B61;
    margin: 1.5vh 10px;
    text-align:center;
    line-height:5vh;
    vertical-align: middle;
    text-decoration: none;
  }
</style>
